﻿<div class="container">
    <div class="row justify-content-center">
        <div class="col-9">
            <div class="card mt-4">
                <div class="card-body">
                    <h2 class="card-title">Add Transaction</h2>

                    <form id="transactionForm" method="post" asp-action="CreateTransaction">
                        <div class="form-group">
                            <label for="institutionName">Institution Name:</label>
                            <select class="form-control" name="InstitutionName" id="institutionName">
                                <option value="">Select name of institution</option>
                                @if (ViewBag.Accounts != null && ViewBag.Accounts.Count > 0)
                                {
                                    @foreach (var account in ViewBag.Accounts)
                                    {
                                        <option value="@account.InstitutionName">@account.InstitutionName (@account.AccountID)</option>
                                    }
                                }
                            </select>
                            <span class="text-info">@TempData["InstitutionNameInfo"]</span>
                        </div>

                        <div class="form-group">
                            <label for="amount">Amount:</label>
                            <small class="form-text text-muted">Enter a positive or negative amount DB/CR (e.g. -10 or 20 )</small>
                            <input class="form-control" type="number" name="Amount" step="0.01">
                            <span class="text-info">@TempData["AmountInfo"]</span>
                        </div>

                        <div class="form-group">
                            <label for="Category">Category:</label>
                            <select class="form-control" name="Category" id="Category" required>
                                <option value="">Select a category</option>
                                @if (ViewBag.Categories != null)
                                {
                                    var categories = (IEnumerable<SelectListItem>)ViewBag.Categories;
                                    foreach (var category in categories)
                                    {
                                        <option value="@category.Text">@category.Text</option>
                                    }
                                }
                            </select>
                            <span class="text-info">@TempData["CategoryInfo"]</span>
                        </div>

                        <div class="form-group">
                            <label for="description">Description:</label>
                            <input class="form-control" type="text" name="Description">
                            <span class="text-info">@TempData["DescriptionInfo"]</span>
                        </div>

                        <div class="form-group">
                            <label for="date">Date:</label>
                            <input class="form-control" type="datetime-local" name="Date" max="@DateTime.Now.ToString("yyyy-MM-ddTHH:mm")" required>
                            <span class="text-info">@TempData["DateInfo"]</span>
                        </div>

                        <input type="hidden" name="AccountID" id="accountId" required>

                        <input type="hidden" name="UserID" value="@ViewBag.Id">
                        <input type="hidden" name="CreatedAt" value="@DateTime.Now">
                        <input type="hidden" name="UpdatedAt" value="@DateTime.Now">
                        <br />
                        <button type="submit" id="createTransactionBtn" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // store mapping of institutionname to accountID
    var accountMap = {
        @if (ViewBag.Accounts != null && ViewBag.Accounts.Count > 0)
        {
            @foreach (var account in ViewBag.Accounts)
            {
                @: '@account.InstitutionName': '@account.AccountID',
            }
        }
    };

    // Function to handle institution name select change event
    document.getElementById("institutionName").addEventListener("change", function () {
        const selectedInstitutionName = this.value;
        document.getElementById("accountId").value = accountMap[selectedInstitutionName] || "";
    });
</script>
<script>$(document).ready(function () {
        $("#transactionForm").submit(function () {
            $("#createTransactionBtn").prop("disabled", true);
        });
    });</script>